<template>
  <el-container>
    <el-header>
      <top-bar></top-bar>
      <!-- <div class="top-nav-bar">
        <span>花卉网：你值得一逛</span>
        <div class="function-bar">
          <div>
            <span>你好，{{ userInfo.userName }}</span>
            <span @click="loginOut">退出</span>
          </div>
          <div>订单查询</div>
          <div>购物车</div>
        </div>
      </div> -->
      <div class="search-box">
        <div class="search-title">
          <span>Huahui 花卉网</span>
          <span>-花之思 只为你-</span>
        </div>
        <div class="search">
          <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            style="width:400px"
            placeholder="商品搜索"
            @select="handleSelect"
          ></el-autocomplete>
          <!-- <el-input v-model="searchInfo" placeholder="商品搜索">
            <template slot="append">搜索</template>
          </el-input> -->
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="main-bj">
        <el-image
          style="width: 100%"
          :src="require('../../assets/img/home-bj2.jpg')"
          fit="fill"
        ></el-image>
        <div class="main-bj-title">
          <span>用鲜花庆祝</span>
          <span>为他们特殊的日子提供大胆的花香</span>
        </div>
      </div>
      <!-- 活动展示 -->
      <div class="notice">公告：{{ notice }}</div>
      <div class="main-box">
        <img src="../../assets/img/home-bj.png" class="home-img">
        <div class="nav-bar">
          <div class="nav-bar-title">
            <i class="el-icon-caret-bottom" style="margin-right:5px"></i>
            <span>所有分类</span>
          </div>
          <div class="nav-bar-contain">
            <div v-for="(item,index) in categorical" :key="index" class="nav-bar-item">
              <span style="line-height:28px">{{ item.title }}</span>
              <div>
                <span v-for="(self,num) in item.data" :key="num" class="nav-bar-item-txt" @click="toDetail($event,self)">{{ self }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sell-well">
        <span>最畅销</span>
        <div>
          <el-carousel trigger="click" height="550px" type="card">
            <el-carousel-item v-for="(item,index) in sellWell" :key="index">
              <el-image
                style="width: 280px"
                :src="item.imgUrlFront"
                fit="fill"
                @click="toGoodsDetail(item)"
              ></el-image>
              <div class="sell-well-title">
                <span>{{ item.name }}</span>
                <span>{{ item.price }}¥</span>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="show-info">
        <div style="height:500px"></div>
        <img src="../../assets/img/home-bj3.jpg" alt="" class="show-info-img">
        <div class="show-info-span">
          <span>HELLO, FALL</span>
          <span>Celebrate the season with autumnal arrangements of delicate dried flowers and feathery fronds that are made to last.</span>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import topBar from '../../components/topBar/index.vue'
export default {
  name: 'Home',
  components: {
    topBar
  },
  data() {
    return {
      notice: '', // 公告
      state: '',
      timeout: null,
      categorical: [], // 分类数组
      sellWell: [], // 销量排行
      userInfo: {}, // 用户信息
      restaurants: [] // 模糊搜索数据
    }
  },
  created() {
    this.$api.home.noticeSelectOne().then(res => {
      this.notice = res.data.content.notice
      console.log(res)
    })
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
    this.getDict()
    this.getBestSell()
  },
  methods: {
    // 跳转到详情页
    toGoodsDetail(e) {
      e.pictureUrl = JSON.parse(e.pictureUrl)
      this.$router.push({ // 核心语句
        path: '/goodsDetail', // 跳转的路径
        query: { // 路由传参时push和query搭配使用 ，作用时传递参数
          goodsDetail: JSON.stringify(e)
        }
      })
    },
    // 获取销售排行
    getBestSell() {
      this.$api.home.getBestSell()
        .then(res => {
          res.data.content.forEach((item, index) => {
            const obj = item
            obj.imgUrlFront = JSON.parse(item.pictureUrl)[0][1]
            obj.name = item.goodsName
            obj.price = item.price
            obj.id = item.id
            this.sellWell.push(obj)
          })
        })
    },
    // 获取分类
    getDict() {
      this.$api.home.getDict({ title: ['鲜花用途', '鲜花花材'] })
        .then(res => {
          console.log(res)
          const categorical = this.categorical
          res.data.content.forEach((item, index) => {
            const obj = {}
            obj.title = item.title
            obj.data = item.datas
            categorical.push(obj)
          })
        })
    },
    toDetail(e, name) {
      this.$router.push({
        path: '/goodsList'
      })
    },
    // 搜索
    handleSelect(item) {
      this.$router.push({ // 核心语句
        path: '/goodsDetail', // 跳转的路径
        query: { // 路由传参时push和query搭配使用 ，作用时传递参数
          goodsDetail: JSON.stringify(item)
        }
      })
    },
    async querySearchAsync(queryString, cb) {
      const { data } = await this.$api.home.queryGoods({ goodsName: queryString })
      this.restaurants = data.content
      var restaurants = this.restaurants
      restaurants.forEach(item => {
        item.value = item.goodsName
      })
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 2000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
    .el-container{
        width: 100%;
        height: 100%;
        min-width: 1200px;
        .el-header{
            display: flex;
            flex-direction: column;
            padding: 0;
            height: auto !important;
            min-width: 1500px;
            .top-nav-bar{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #f1f3f6;
                color: #666e73;
                font-size: 12px;
                line-height: 40px;
                padding: 0 200px;
                .function-bar{
                    width: 40%;
                    display: flex;
                    justify-content: flex-start;
                    div{
                        margin-right: 50px;
                        span{
                            margin-right: 5px;
                        }
                    }
                }
            }
            .search-box{
              display: flex;
              align-items: center;
              padding:20px 0 20px 200px;
              .search-title{
                display: flex;
                flex-direction: column;
                color: #fd684a;
                margin-right: 50px;
                align-items: center;
                span:nth-child(1){
                  font-size: 35px;
                }
                span:nth-child(2){
                  color: #f8bcae;
                  font-size: 18px;
                }
              }
              .search{
                width: 500px;
                ::v-deep .el-input__inner{
                border-color: #fd684a !important;
                }
                ::v-deep  .el-input-group__append{
                  background-color: #fd5e40 !important;
                  color: white;
                  border-color: #fd5e40;
                }
              }
            }
        }
        .el-main{
          padding: 0 0 20px;
          display: flex;
          flex-direction: column;
          .notice{
            text-align: center;
            height: 50px;
            line-height: 50px;
            background-color: #e8e8ea;
          }
          .main-bj{
            width: 100%;
            height: auto;
            position: relative;
            .main-bj-title{
              width: 280px;
              height: 100px;
              position: absolute;
              display: flex;
              flex-direction: column;
              align-items: center;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              font-family:"Playfair Display";
              color: #702c3f;
              span:nth-child(1) {
                font-size: 55px;
                font-weight: 400;
                line-height: 65px;
              }
              span:nth-child(2) {
                font-size: 1px;
                line-height: 30px;
              }
            }
          }
          .main-box{
            position: relative;
            margin-top: 50px;
            .home-img{
              min-width: 1500px;
              width: 100%;
              height: 408px;
            }
            .nav-bar{
              position: absolute;
              top: -45px;
              left: 200px;
              width: 250px;
              .nav-bar-title{
                color: white;
                background-color: #fd6647;
                height: 45px;
                line-height: 45px;
                font-size: 18px;
                padding: 0px 15px;
                border-radius: 10px 10px 0 0;
              }
              .nav-bar-contain{
                padding-bottom: 40px;
                height: 408px;
                box-sizing: border-box;
                background: url(//img02.hua.com/pc/pimg/home/black-bg.png);
                z-index: 999;
                color: #fff;
                .nav-bar-item{
                  padding: 15px;
                  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
                  .nav-bar-item-txt{
                    font-weight: 100;
                    font-size: 14px;
                    line-height: 24px;
                    margin-right: 15px;
                    white-space:nowrap;
                    cursor:pointer;
                    &:hover{
                      color: #df6a52;
                    }
                  }
                }
              }
            }
          }
          .sell-well{
            padding: 0 200px;
            text-align: center;
            span:nth-child(1) {
              width: 100%;
              text-align: center;
              margin: 0 0 30px;
              font-family: Playfair Display;
              color: #1f304f;
              font-size: 32px;
              line-height: 64px;
              letter-spacing: 2.52px;
            }
            .sell-well-title{
              span:nth-child(1) {
                font-size: 12px;
                font-family: Noto Sans KR,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
                margin-right: 80px;
                line-height: 22px;
              }
              span:nth-child(2) {
                font-size: 12px;
                font-family: Noto Sans KR,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
                line-height: 22px;
              }
            }
          }
          .show-info{
            margin-top: 100px;
            position: relative;
            width: 100%;
            height: 500px;
            background-color: #e8e4db;
            .show-info-img{
              width: 791px;
              height: 489px;
              position: absolute;
              top: -50px;
              right: 0;
            }
            .show-info-span{
              position: absolute;
              font-family: Playfair Display;
              color: #203a56;
              width: 40%;
              padding: 75px 20px;
              background-color: #fff;
              display: flex;
              flex-direction: column;
              left: 15%;
              top: 179px;
              text-align: center;
              span:nth-child(1) {
              font-size: 36px;
              line-height: 42px;
              letter-spacing: 2.16px;
              }
              span:nth-child(2) {
              font-size: 18px;
              line-height: 34px;
              letter-spacing: 0.36px;
              font-size: 100;
              }
            }
          }
        }
    }
</style>
